<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem" v-record="{doing:'点击了创建按钮'}" v-permission="'company.add'">
      创建</el-button>
    <div class="filter-container">
      <el-input style="width: 300px" placeholder="输入查询条件按回车" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter="research" @clear="research" v-model="query.queryString"></el-input>
      <el-button class="filter-item" type="success" plain v-record="{doing:'点击了查询按钮'}" @click="research">查询
      </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
    </z-table>
    <z-pagination :pagination="pagination" :total="total" v-model:page="query.page" v-model:limit="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" v-model="editFormVisible">
      <template v-slot:extra-area>
        <div style="padding-left: 140px">
          <div class="panel-info">
            <div class="panel-title">设备信息</div>

            <div class="panel-body">
              <el-row :gutter="10" type="flex" style="font-size: 12px; margin-bottom: 15px">
                <el-col :span="6">
                  <label>设备</label>
                </el-col>
                <el-col :span="6">
                  <label>状态</label>
                </el-col>
                <el-col :span="9">
                  <label>时间</label>
                </el-col>
                <el-col :span="3">
                  <label>操作</label>
                </el-col>
              </el-row>
              <el-row :gutter="10" class="mb-10" type="flex" v-for="(d, i) in MachineInfo" :key="i">
                <el-col :span="6">
                  <el-select style="width: 100%" v-model="d.MachineId" filterable>
                    <el-option v-for="(i, t) in MachineOptions" :key="t" :label="`${i.MachineCode} ${i.MachineName} `"
                      :value="i.MachineId"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-select style="width: 100%" v-model="d.CalendarType" filterable clearable>
                    <el-option v-for="(i, t) in CalendarTypeStatus" :key="t" :label="i.label"
                      :value="i.value"></el-option>
                  </el-select>
                </el-col>

                <el-col :span="9" >
                  <div class="flex flex-center">
                    <el-time-picker v-model="d.time" is-range range-separator="至" format="HH:mm" value-format="HH:mm"
                      start-placeholder="Start time" end-placeholder="End time" />
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="flex">
                    <a class="text-red t-18 mt-8" type="text" @click.prevent="deleteSite(d, i)" circle><i
                        class="el-icon-delete"></i></a>
                    <a class="text-blue t-18 ml-12 mt-8" type="text" @click.prevent="addSite"
                      v-if="i == MachineInfo.length - 1" circle><i class="el-icon-circle-plus-outline"></i></a>
                  </div>
                </el-col>

              </el-row>
            </div>
          </div>
        </div>
      </template>

    </z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'routerGroup',
  data: function () {
    return {
      api: this.$api.company,
      name: '工序',
      MachineOptions:[],
      CalendarTypeStatus:[],
      MachineInfo:[{}],
      columns: [
        { title: '公司代码', key: 'company_name', width: 200 },
        { title: '公司名称', key: 'company_description' },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      fields: [
        { title: '公司代码', key: 'company_name', required: true, tips: '公司代码不能重复' },
        { title: '公司名称', key: 'company_description', required: true },
      ],
    }
  },
  methods: {
    addSite(){
      this.MachineInfo.push({})
    },
    deleteSite(item, index) {
      this.MachineInfo.splice(index, 1)
    },
  },
  created: function () {
    this.getList()
  },
}
</script>
<style scoped>
</style>
